<script setup>
import { ref } from 'vue';
import {ElForm, ElInput, ElFormItem, ElButton, ElCol, ElRow, ElCard, ElMessage, ElIcon} from 'element-plus';
import {Post, PostFile} from "@/axios/api.js";
import {  getCurrentInstance } from 'vue';
import {handleDownload} from "@/utils/handleDownload.js";
import TranslationInputField from "@/components/RiverEnv/translationInputField.vue";

const { proxy } = getCurrentInstance();

// 定义表单数据模型
const form = ref({
  designhead: '',
  period: '',
  designflow: '',
  backgroundcod: '',
  backgroundnh3: '',
  backgroundtp: '',
  qualityobjective:'',
});
// 定义具体的参数名称数组

// 定义表单引用
const formRef = ref(null);

// 映射数组，将索引转换为属性名
const parameterMap = [
  { label: '设计水位(m)', prop: 'designhead' },
  { label: '换水周期(d)', prop: 'period' },
  { label: '设计流量(m³/d)', prop: 'designflow' },
  { label: 'COD背景浓度(mg/L)', prop: 'backgroundcod' },
  { label: 'NH₃-N背景浓度(mg/L)', prop: 'backgroundnh3' },
  { label: 'TP背景浓度(mg/L)', prop: 'backgroundtp' },
];

// 水质目标下拉菜单选项
const qualityobjective = [
  { value: 'Ⅰ类水', label: 'Ⅰ类水' },
  { value: 'Ⅱ类水', label: 'Ⅱ类水' },
  { value: 'Ⅲ类水', label: 'Ⅲ类水' },
  { value: 'Ⅳ类水', label: 'Ⅳ类水' },
];

// // 声明组件可能发出的事件
// const emit = defineEmits(['confirm']);
// 确认按钮点击事件处理
const onConfirm = async () => {
  console.log("calculation");
  Post('/River/getCalculationParameters',form.value).then((response) => {
    const { code, msg, data,rows,total: res } = response.data;
    if (code === 200) {
      console.log("提交表单数据");
      ElMessage.success(msg ?? "Submitted!");
      // 提交表单数据1s后刷新表格
      setTimeout(() => {
        // childRef.value.updateMethod();
        //调用方法传递数据
        proxy.mittBus.emit('visitDataTimeLine',"test");
        //移除监听事件
        proxy.mittBus.off('visitDataTimeLine');
      }, 1000);

    } else {
      ElMessage.error(msg);
    }
  });
};
const onClose=()=>{
  showCardContainer.value = false;
};
const showCardContainer = ref(true); // Default to visible (true)


const translate = ref(null)

// 上传文件后上传坐标系转换的参数
const handlesuccess = (response)=>{
  const { code, msg,data } = response
  if (code === 200) {
    translate.value.onConfirm(msg)
  } else {
    ElMessage.error(msg);
  }
}




// const uploadtransformData =async ()=>{
//   return await translate.value.onConfirm()
// }

</script>

<template>


  <div class="card-container"
       v-if="showCardContainer"
  >
    <el-card shadow="never">

<!--      <translation-input-field-->
<!--      ref = "translate"-->
<!--      ></translation-input-field>-->


      <el-col :span="20" class="button-row" style="margin: 0 auto;">

        <el-button type="primary" text="primary"
                   @click="handleDownload"
                   class="download-button"
                   style="flex: 1; max-width: 40%;">
          下载示例文件
        </el-button>
        <el-upload
            ref="upload"
            action="http://1.1.1.200:9602/River/uploadRiverMeasurementData"
            :auto-upload="true"
            limit="1"
            accept=".xlsx,.zip"
            class="upload-component"
            :before-upload ="uploadtransformData"
            :on-success="handlesuccess"
            style="flex: 1; max-width: 40%;float:right;margin-right: 50px">
          <el-button type="primary" style="width: 100%;">
            地勘文件上传
          </el-button>
        </el-upload>
      </el-col>

      <div slot="header" class="header-title">
        <h3 style="text-align: center;">基本数据输入</h3>
      </div>

      <el-form ref="formRef" :model="form" label-width="180">
        <!-- 七个参数输入框 -->
        <el-row :gutter="20">
          <el-col :span="24"
                  v-for="(param, index) in parameterMap"
          >
            <el-form-item :label="param.label"
            >
              <el-input
                  v-model="form[param.prop]"
                  :placeholder="param.prop === 'designhead' ? '多个水位参数之间使用,隔开' : '请输入参数'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <!-- 水质目标下拉菜单 -->
        <el-form-item label="水质目标">
          <el-select v-model="form.qualityobjective" placeholder="请选择水质目标">
            <el-option
                v-for="item in qualityobjective"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>


        <!-- 确认按钮 -->
        <el-row>
          <el-col :span="24" class="button-row">


            <el-button type="primary" @click="onConfirm" style="width: 30%;">确认</el-button>
<!--            <el-button type="primary" @click="onClose" style="width: 30%;">关闭</el-button>-->
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>



.card-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.el-card {
  background-image: linear-gradient(135deg, #ffffff 0%, #f1f5fc 100%);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.header-title h3 {
  color: #1d1c1c;
  font-size: 24px;
  margin: 0;
  padding: 20px 0;
  text-align: center;
}

.el-form-item__label {
  color: #adc6eb;
  font-size: 14px;
}

.el-input__inner {
  border-color: #8fc0fc;
  height: 44px;
  border-radius: 6px;
  font-size: 14px;
  padding: 0 15px;
}

.el-button--primary {
  background-image: linear-gradient(45deg, #abc2df 0%, #93a9ce 100%);
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 6px;
  height: 48px;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  background-position: right bottom;
}

.button-row {
  text-align: center;
  margin-top: 30px;
}
</style>